<script setup>
import {reactive} from "vue";
import {Search} from "@element-plus/icons-vue";
import request from "@/utils/request";
import {ElMessage, ElMessageBox} from "element-plus";

/**
 * 本地存储的账户信息
 *
 * @type {any}
 */
const account = JSON.parse(localStorage.getItem('account-info') || '{}')

/**
 * 学生数据
 *
 * @type {UnwrapNestedRefs<{total: number, form: {studentBusinessNo: string, studentCreateTime: string, studentCountNumber: string, studentEmploymentState: string, studentOrderClassAdminNo: string, studentOrderClassReviewState: string, studentBusinessName: string, studentOrderClassName: string, studentOrderClassNo: string, studentEmail: string, studentAge: number, studentUpdateMan: string, studentUpdateTime: string, studentName: string, studentIntroduction: string, studentNo: string, studentComprehensiveEvaluation: string, studentMajorName: string, studentPhone: string, studentSex: string, studentOrderClassAdminName: string, studentCreateMan: string, studentMajorNo: string}, studentName: string, pageSize: number, tableData: *[], pageNum: number}>}
 */
const studentData = reactive({
    studentName: '',
    tableData: [],
    total: 0,
    pageSize: 3,
    pageNum: 1,
    form: {
        studentNo: '',
        studentName: '',
        studentAge: 0,
        studentSex: '',
        studentIntroduction: '',
        studentComprehensiveEvaluation: '',
        studentOrderClassReviewState: '',
        studentBusinessNo: '',
        studentBusinessName: '',
        studentEmploymentState: '',
        studentOrderClassNo: '',
        studentOrderClassName: '',
        studentOrderClassAdminNo: '',
        studentOrderClassAdminName: '',
        studentMajorNo: '',
        studentMajorName: '',
        studentPhone: '',
        studentEmail: '',
        studentCreateMan: '',
        studentCreateTime: '',
        studentUpdateMan: '',
        studentUpdateTime: '',
        studentCountNumber: '',
    }
})

/**
 * 加载学生
 */
const loadStudent = () => {

    request.get(`/api/student/find-student-page-admin`, {
        params: {
            pageNum: studentData.pageNum,
            pageSize: studentData.pageSize,
            studentName: studentData.studentName
        }
    }).then(res => {
        studentData.tableData = res.data?.list || []
        studentData.total = res.data?.list.map(item => item.studentCountNumber)[0] || 0;
    })

}
// 调用学生加载方法，获取后台数据
loadStudent()

/**
 * 翻页
 */
const handelCurrentChange = () => {
    // 翻页时，重新加载数据即可
    loadStudent()
}

/**
 * 重置
 */
const reset = () => {
    studentData.studentName = ''
    // 重置时，重新加载数据即可
    loadStudent()
}

/**
 * 删除学生
 *
 * @param studentNo 学号
 */
const deleteStudent = (studentNo) => {
    ElMessageBox.confirm("删除数据后无法恢复，您确认删除此条数据？", "删除确认", {type: 'warning'}).then(() => {
        if (account.accountRoleName === 'visitor-admin') {
            ElMessage.info("游客-管理员仅可以查看信息")
        } else {
            request.delete(`/api/student/delete-student/${studentNo}`).then(res => {
                if (res.code === "200") {
                    // 重新获取数据
                    loadStudent()
                    ElMessage.success("删除成功")
                } else {
                    ElMessage.error(res.msg)
                }
            })
        }
    }).catch(() => {
        ElMessage({
            type: "info",
            message: "取消删除",
        })
    })
}

/**
 * 上传成功
 */
const uploadSuccess = () => {
    if (account.accountRoleName === 'visitor-admin') {
        ElMessage.info("游客-管理员仅可以查看信息")
    } else {
        console.log("上传成功");
        ElMessage.success("上传成功")
        // 重新获取数据
        loadStudent()
    }
}
</script>

<template>
    <div v-if="account.accountRoleName === 'system-admin' || account.accountRoleName === 'visitor-admin'">
        <div class="card" style="margin-bottom: 10px;">
            <el-input style="width: 300px; margin-right: 10px;" v-model="studentData.studentName"
                      placeholder="请输入姓名查询"
                      :prefix-icon="Search"/>
            <el-button @click="loadStudent" type="primary" style="margin-left: 10px;">查询</el-button>
            <el-button @click="reset" type="info" style="margin-left: 10px;">重置</el-button>
        </div>

        <div class="card" style="margin-bottom: 10px;">
            <div>
                <el-upload class="upload-demo"
                           action="http://localhost:9090/api/system/upload-student-excel"
                           accept=".xlsx"
                           :show-file-list="false"
                           :on-success="uploadSuccess">
                    <el-button type="primary" v-if="account.accountRoleName === 'system-admin'">导入Excel</el-button>
                </el-upload>
                <el-button type="primary" @click="uploadSuccess" v-if="account.accountRoleName === 'visitor-admin'">
                    导入Excel
                </el-button>
                <div class="el-upload__tip">
                    仅允许上传一个文件，仅限xlsx格式
                </div>
                <el-table :data="studentData.tableData" style="width: 100%">
                    <el-table-column prop="studentNo" label="学号" width="60px"/>
                    <el-table-column prop="studentName" label="姓名" width="80px"/>
                    <el-table-column prop="studentAge" label="年龄" width="60px"/>
                    <el-table-column prop="studentSex" label="性别" width="70px"/>
                    <el-table-column prop="studentOrderClassName" label="订单班"/>
                    <el-table-column prop="studentOrderClassAdminName" label="订单班管理员" width="70px"/>
                    <el-table-column prop="studentMajorName" label="专业"/>
                    <el-table-column prop="studentPhone" label="手机号"/>
                    <el-table-column prop="studentEmail" label="电子邮箱"/>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button @click="deleteStudent(scope.row.studentNo)" type="danger" size="small"
                                       plain>删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="card">
            <el-pagination v-model:current-page="studentData.pageNum"
                           v-model:page-size="studentData.pageSize"
                           @current-change="handelCurrentChange"
                           background layout="prev, pager, next" :total="studentData.total"/>
        </div>
    </div>
</template>

<style scoped>

</style>